<template>
  <!--router 启动路由功能 -->
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    default-active="2"
    text-color="#fff"
    @open="handleOpen"
    @close="handleClose"
    router
  >
    <el-sub-menu
      v-for="(sysinfo, index) in sysinfos.filter((sys) => sys.parentid === 1)"
      :key="'sysinfo' + index"
      :index="index"
    >
      <template #title>
        <el-icon><location /></el-icon>
        <span>{{ sysinfo.title }}</span>
      </template>
      <el-menu-item
        v-for="(subnode, index) in sysinfos.filter((sys) => sys.parentid === sysinfo.sysid)"
        :key="'subnode' + index"
        :index="subnode.path"
      >
        {{ subnode.title }}
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import useSysinfoStore from '@/stores/sysinfo.js'

import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'

const sysinfoStore = useSysinfoStore()
sysinfoStore.findSysnodesByempno()

const { sysinfos } = storeToRefs(sysinfoStore)

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>
